<template>
	<view class="settlement-container">
		<view class="form-card">
			<view class="form-item" v-for="(item, index) in formItems" :key="index">
				<view class="form-label">
					<text>{{$t(item.labelKey)}}</text>
					<text class="required">{{$t('settlement.required')}}</text>
				</view>
				<view class="form-input">
					<u--input
						:type="item.type || 'text'"
						:placeholder="$t(item.placeholderKey)"
						border="none"
						v-model="listValue[item.field]"
						:custom-style="inputStyle"
					></u--input>
				</view>
			</view>
		</view>

		<view class="form-card">
			<view class="form-label">{{$t('settlement.message')}}</view>
			<view class="form-textarea">
				<u--textarea
					v-model="listValue.note"
					:placeholder="$t('settlement.messagePlaceholder')"
					height="150px"
          border="none"
					:custom-style="textareaStyle"
				></u--textarea>
			</view>
		</view>

    <button class="submit-btn" @click="submit" v-if="btnShow">{{$t('settlement.submit')}}</button>
	</view>
</template>

<script>
	import {
		GetBusinessApplyDetail,
		getBusinessApplyUpload
	} from '@/api/qxlj.js';

	export default {
		data() {
			return {
				listValue: {
					shopName: '',
					name: '',
					tel: '',
					note: '',
					id: 0,
				},
				btnShow: true,
				formItems: [
					{
						labelKey: 'settlement.merchantName',
						field: 'shopName',
						placeholderKey: 'settlement.merchantNamePlaceholder'
					},
					{
						labelKey: 'settlement.name',
						field: 'name',
						placeholderKey: 'settlement.namePlaceholder'
					},
					{
						labelKey: 'settlement.contactPhone',
						field: 'tel',
						type: 'number',
						placeholderKey: 'settlement.contactPhonePlaceholder'
					}
				],
				inputStyle: {
					borderRadius: '12rpx',
					padding: '20rpx 24rpx',
					fontSize: '28rpx',
					transition: 'all 0.3s ease',
					'&:focus': {
						boxShadow: '0 0 0 2rpx rgba(73,143,255,0.1)'
					}
				},
				textareaStyle: {
					borderRadius: '12rpx',
					padding: '20rpx 24rpx',
					fontSize: '28rpx',
					transition: 'all 0.3s ease',
          backgroundColor: "#F7F8FA",
					'&:focus': {
						boxShadow: '0 0 0 2rpx rgba(73,143,255,0.1)'
					}
				},
				buttonStyle: {
					background: 'linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%)',
					color: '#FFFFFF',
					height: '96rpx',
					fontSize: '30rpx',
					fontWeight: '600',
					boxShadow: '0 4rpx 12rpx rgba(73,143,255,0.3)',
					transition: 'all 0.3s ease',
					'&:active': {
						transform: 'translateY(2rpx)',
						boxShadow: '0 2rpx 6rpx rgba(73,143,255,0.2)'
					}
				}
			}
		},
		onLoad() {
      this.listValue = {
        shopName: '',
        name: '',
        tel: '',
        note: '',
        id: 0,
      }
			this.getDetail();
		},
		methods: {
			async getDetail() {
				try {
					const { Data } = await GetBusinessApplyDetail({});
					if (Data.ID !== 0) {
						this.listValue.shopName = Data.CompanyName;
						this.listValue.name = Data.UserTrueName;
						this.listValue.tel = Data.Tel;
						this.listValue.note = Data.Note;
						this.listValue.id = Data.ID;
					}
					if(Data.IsBusiness!=3){
						this.btnShow = false;
					}
				} catch (e) {
					console.error('获取详情失败:', e);
				}
			},
			submit() {
				const { shopName, name, tel } = this.listValue;

				if (!shopName) {
					this.showToast(this.$t('settlement.enterMerchantName'));
					return;
				}
				if (!name) {
					this.showToast(this.$t('settlement.enterName'));
					return;
				}
				if (!tel) {
					this.showToast(this.$t('settlement.enterContactPhone'));
					return;
				}

				this.postData(this.listValue);
			},
			showToast(title) {
				uni.showToast({
					icon: 'error',
					title,
					duration: 2000
				});
			},
			async postData(data) {
				try {
					const { Data } = await getBusinessApplyUpload({
						CompanyName: data.shopName,
						UserTrueName: data.name,
						Tel: data.tel,
						Note: data.note,
						ID: data.id
					});

					uni.showToast({
						title: this.$t('settlement.submitSuccess'),
						icon: 'success',
						duration: 2000
					});
          setTimeout(()=>{
            uni.navigateBack()
          },2000)
				} catch (e) {
					console.error('提交失败:', e);
					uni.showToast({
						title: this.$t('settlement.submitFailed'),
						icon: 'none',
						duration: 2000
					});
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.settlement-container {
		min-height: 100vh;
		padding: 20rpx;
		background-color: #F5F7FA;
		box-sizing: border-box;
	}

	.form-card {
		background-color: #FFFFFF;
		border-radius: 20rpx;
    padding: 0 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		animation: slideUp 0.5s ease forwards;

		&:nth-child(1) {
			animation-delay: 0.1s;
		}

		&:nth-child(2) {
			animation-delay: 0.2s;
      padding: 30rpx;
		}
	}

	.form-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid #E6E6E6;

		&:last-child {
			border-bottom: none;
		}
	}

	.form-label {
		width: 200rpx;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		align-items: center;

		.required {
			color: #FF4D4F;
			margin-left: 4rpx;
		}
	}

	.form-input {
		flex: 1;
	}

	.form-textarea {
		margin-top: 20rpx;
	}

	.submit-btn {
		margin-top: 20rpx;
    height: 86rpx;
    background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 44rpx;
    transition: all 0.3s ease;
    letter-spacing: 2rpx;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(73,143,255,0.2);
    }
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/deep/ .u-input {
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		transition: all 0.3s ease;

		&:focus {
			box-shadow: 0 0 0 2rpx rgba(73,143,255,0.1);
		}
	}

	/deep/ .u-textarea {
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		transition: all 0.3s ease;

		&:focus {
			box-shadow: 0 0 0 2rpx rgba(73,143,255,0.1);
		}
	}

	/deep/ .u-button {
		background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
		color: #FFFFFF;
		height: 96rpx !important;
		font-size: 30rpx !important;
		font-weight: 600;
		box-shadow: 0 4rpx 12rpx rgba(73,143,255,0.3);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 2rpx 6rpx rgba(73,143,255,0.2);
		}
	}
</style>
